<template>
  <div class="nav">
    <div class="top">
      <div class="left">
        <!-- <div class="icon" @click="toggleNav">
          <i
            class="iconfont"
            :class="isCollapse ? 'icon-expand' : 'icon-collapse'"
          ></i>
        </div> -->
        <div></div>
        <div class="searchBox">
          <div class="inputBox">
            <input
              type="text"
              placeholder="搜索病人姓名或电话..."
              v-model="keyword"
              class="vInput"
            />
          </div>
          <div class="buttonBox">
            <button class="vButton" @click="search">查询</button>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="inner">
          <div class="avatar">
            <img src="@/assets/images/male.jpg" alt="" />
          </div>
          <div class="message">{{ username }}，欢迎您回来!</div>
          <div class="icon" @click="handlelogOut">
            <i class="iconfont icon-logout"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { logout } from "@/api/index";
import { vConfirm } from "@/plugins/vConfirm";
import { vToast } from "@/plugins/vToast";
const isCollapse = ref(false);
const emit = defineEmits(["toggleNav", "search"]);
const toggleNav = () => {
  isCollapse.value = !isCollapse.value;
  emit("toggleNav", isCollapse.value);
};
const username = ref(null);
const keyword = ref(null);
username.value = sessionStorage.getItem("username")
  ? sessionStorage.getItem("username")
  : "";
const handlelogOut = () => {
  vConfirm({
    message: "确定退出吗?",
  })
    .then(() => {
      logout().then((res) => {
        if (res.code == 200) {
          vToast({
            message: "退出成功！",
          });
        } else {
          vToast({
            message: "退出失败" + res.msg,
          });
        }

        setTimeout(() => {
          window.location.href = "/user/login";
        }, 500);
      });
    })
    .catch(() => {});
};
const search = () => {
  if (!keyword.value) {
    vToast({
      message: "请输入病人姓名或手机号",
      position: "top",
    });
  } else {
    emit("search", keyword.value);
  }
};
</script>
<style lang="less" scoped>
@import url("@/assets/css/variables.less");

.nav {
  height: 100%;
  .top {
    background: var(--bs-theme-color);
    color: var(--bs-border-color);
    display: flex;
    justify-content: space-between;
    height: 100%;
    .icon {
      width: 60px;
      height: 60px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-right: rgba(0, 0, 0, 0.2) 1px solid;
      cursor: pointer;
      .iconfont {
        font-size: 22px;
      }
    }
  }
}
.left {
  display: flex;
  gap: 20px;
  align-items: center;
}
.right {
  .inner {
    display: flex;
    gap: 22px;
    align-items: center;
    .avatar {
      display: flex;
      flex-direction: column;
      justify-content: center;
      img {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: var(--bs-bg-color) 2px solid;
      }
    }
    .icon {
      border-right: none;
      border-left: rgba(0, 0, 0, 0.2) 1px solid;
    }
    .message {
      display: flex;
      align-items: center;
    }
  }
}
.searchBox {
  display: flex;
  border: rgba(255, 255, 255, 0.2) 1px solid;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 20px;
  overflow: hidden;
  .vButton {
    border: none;
    color: var(--bs-bg-color);
    background: rgba(0, 0, 0, 0.1);
    border-left: rgba(255, 255, 255, 0.2) 1px solid;
  }
  .vInput {
    text-indent: 1em;
    color: var(--bs-bg-color);
    &::placeholder {
      color: rgba(255, 255, 255, 0.4);
    }
  }
}
</style>
